@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@custom-variant dark {
  @media not print {
      &:where(.dark, .dark *) {
          @slot
      }
  }
}

@source inline("aspect-square bg-white/[.06] border-white/40 h-3 w-3 h-[64px] w-[65px]! left-[65px] {dark:,}text-base-{50,{100..900},950} dark:hover:bg-white/[.06] {-,}translate-{x,y}-{1/2}");
@source inline("{-,}{top,bottom,left,right}-{1/2,0..6} {!,}leading-[38px] text-{default,subtle,important}");
@source inline("bg-linear-to-{{t,r,b,l,tl,tr,bl,br}} {dark:,}{from,to}-{{{base,primary}-{50,{100..900..100},950}},white}");
@source inline("rounded rounded-{t,r,b,l} rounded-{t,r,b,l}-default");
@source inline("{md:,lg:,2xl:,}relative {md:,lg:,2xl:,}flex {md:,lg:,2xl:,}absolute {md:,lg:,2xl:,}sticky");
@source inline("{-,}{lg:,}m{t,r,b,l,x,y,}-{0..24} {-,}{lg:,}p{t,r,b,l,x,y,}-{0..24}");
@source inline("{md:,lg:,}border-{0,2} {md:,lg:,}border-{t,r,b,l}-{0,2}");
@source inline("{!,}{hover:,dark:,}bg-primary-{50,{100..900..100},950}");
@source inline("{hover:,dark:,}border-base-{50,{100..900..100},950} {hover:,dark:,}border-transparent");
@source inline("{hover:,dark:,}bg-base-{50,{100..900..100},950}");
@source inline("{md:,lg:,}{min-h,h,min-w,w}-{1..8} {md:,lg:,}w-{1/2,1/3,2/3,1/4,2/4,3/4,1/5,2/5,3/5,4/5,1/6,2/6,3/6,4/6,5/6,1/7,2/7,3/7,4/7,5/7,6/7}");
@source inline("{md:,lg:,xl:,}gap-{0.5,{1..16}}");
@source inline("{md:,lg:,xl:,}grid-cols-{1..16}");
@source inline("{md:,lg:,xl:,}col-span-{1..16}");

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-base-200, currentColor);
  }
}

@theme {
  --font-sans: 'Inter', sans-serif;
  --shadow-raised: 0 2px 12px var(--color-base-300);
  --shadow-raised-dark: 0 2px 12px var(--color-base-700);
}

@theme inline{
  --radius-default: var(--border-radius, 6px);

  --color-primary-50: var(--color-primary-50);
  --color-primary-100: var(--color-primary-100);
  --color-primary-200: var(--color-primary-200);
  --color-primary-300: var(--color-primary-300);
  --color-primary-400: var(--color-primary-400);
  --color-primary-500: var(--color-primary-500);
  --color-primary-600: var(--color-primary-600);
  --color-primary-700: var(--color-primary-700);
  --color-primary-800: var(--color-primary-800);
  --color-primary-900: var(--color-primary-900);
  --color-primary-950: var(--color-primary-950);

  --color-base-50: var(--color-base-50);
  --color-base-100: var(--color-base-100);
  --color-base-200: var(--color-base-200);
  --color-base-300: var(--color-base-300);
  --color-base-400: var(--color-base-400);
  --color-base-500: var(--color-base-500);
  --color-base-600: var(--color-base-600);
  --color-base-700: var(--color-base-700);
  --color-base-800: var(--color-base-800);
  --color-base-900: var(--color-base-900);
  --color-base-950: var(--color-base-950);

  --color-font-subtle-light: var(--color-font-subtle-light);
  --color-font-subtle-dark: var(--color-font-subtle-dark);
  --color-font-default-light: var(--color-font-default-light);
  --color-font-default-dark: var(--color-font-default-dark);
  --color-font-important-light: var(--color-font-important-light);
  --color-font-important-dark: var(--color-font-important-dark);
}


@utility text-important {
 @apply text-font-important-light dark:text-font-important-dark;
}

@utility text-default {
  @apply text-font-default-light dark:text-font-default-dark;
}

@utility text-subtle {
  @apply text-font-subtle-light dark:text-font-subtle-dark;
}

@utility field-sizing-content {
  field-sizing: content;
}

@utility border-spacing-none {
  border-spacing: 0;
}

@utility material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

@utility scrollable-top {
  @apply after:absolute after:content-[''] after:bg-linear-to-t after:from-base-100 after:h-4 after:left-0 after:right-0 after:-top-px after:-translate-y-full dark:after:bg-none;
}

@utility md-16 {
  font-size: 16px;
}

@utility md-18 {
  font-size: 18px;
}

.errorlist {
  @apply *:before:align-bottom *:before:content-['warning'] *:before:material-symbols-outlined *:before:mr-1;
}

[x-cloak] {
  @apply hidden!;
}

.asteriskField {
  @apply text-red-600;
}

.sortable-ghost {
  @apply opacity-50;
}

/*******************************************************
 Search
 *******************************************************/
input[type="search"]::-webkit-search-cancel-button {
  @apply z-10 dark:invert;
}

/*******************************************************
 Select
 *******************************************************/
select:not([class*="bg-none"]):not([multiple]) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3e%3cpath fill='#6B7280' d='M24 31.4 11.3 18.7l2.85-2.8L24 25.8l9.85-9.85 2.85 2.8Z'/%3e%3c/svg%3e");
  background-position: right 0.7rem center;
  background-repeat: no-repeat;
  background-size: 1.125rem 1.125rem;
}

#changelist-actions select:not([class*="bg-none"]):not([multiple]) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3e%3cpath fill='#ffffff' d='M24 31.4 11.3 18.7l2.85-2.8L24 25.8l9.85-9.85 2.85 2.8Z'/%3e%3c/svg%3e");
}

select:after {
  content: "";
  display: block;
}

/*******************************************************
 Table
 *******************************************************/

table tr.selected td,
table tr.selected th {
  @apply bg-yellow-200/[.10] dark:bg-white/[.03];
}

/*******************************************************
 Datetime
 *******************************************************/
.datetimeshortcuts {
  @apply absolute flex flex-row-reverse items-center right-px text-[0px] top-px;
}

.datetimeshortcuts a {
  @apply flex items-center h-9 text-[0px] text-base-400 transition hover:text-base-700;
}

.datetimeshortcuts a:first-child {
  @apply hidden;
}

.datetimeshortcuts a:first-child:after {
  @apply content-['update'] flex h-9 items-center justify-center leading-none material-symbols-outlined px-3 py-2 text-center hover:text-base-700 dark:border-base-700 dark:hover:text-base-700;
}

.datetimeshortcuts a:first-child:after {
  @apply flex;
}

.clock-icon,
.date-icon {
  @apply block text-base-400 transition-all hover:text-base-700 dark:text-base-500 dark:hover:text-base-200;
  @apply after:border-base-200 after:material-symbols-outlined after:px-3 dark:after:border-base-700;
}

.date-icon:after {
  content: "calendar_today";
}

.clock-icon:after {
  content: "schedule";
}

.timezonewarning {
  @apply absolute block items-center right-11 top-2 text-base-500 truncate;
  font-size: 0;
}

.timezonewarning:hover {
  @apply bg-white bottom-px leading-9 left-px right-px px-3 rounded-default text-xs top-px dark:bg-base-900;
}

.timezonewarning:hover:before {
  @apply hidden mr-2;
}

.timezonewarning:before {
  @apply block border-base-200 cursor-pointer items-center justify-center material-symbols-outlined text-base text-center text-red-600 dark:border-base-700;
  content: "warning";
}

/*******************************************************
 Selector
 *******************************************************/
.selector {
  @apply flex flex-col grow items-center max-w-5xl md:flex-row;
}

.selector .selector-available-title label,
.selector .selector-chosen-title label {
  @apply block border-b border-base-200 font-semibold mb-3 py-2 px-4 text-sm text-font-important-light dark:border-base-700 dark:text-font-important-dark;
}

.selector .helptext {
  @apply border-b border-base-200 mb-3 px-4 pb-3 dark:border-base-700;
}

.selector select {
  @apply bg-none grow w-full dark:bg-base-900 dark:scheme-dark;
}

.selector option {
  @apply px-3 text-base-500 text-sm truncate dark:text-base-300;
}

.selector .list-footer-display {
  @apply border-t border-base-200 py-2 text-center text-sm dark:border-base-700;
}

.selector-chosen,
.selector-available {
  @apply border border-base-200 flex flex-col grow rounded-default self-stretch shadow-xs md:w-72 lg:w-96 dark:border-base-700;
}

.selector-chosen h2,
.selector-available h2 {
  @apply border-b border-base-200 mb-3 py-2 px-3 text-sm text-base-500 dark:border-base-700 dark:text-base-200;
}

.selector-filter {
  @apply flex;
}

.selector-filter input {
  @apply bg-base-100 block grow font-medium mb-3 mx-3 px-3 py-2 rounded-default text-base-500 text-sm focus:outline-hidden dark:bg-base-800 dark:text-base-300;
}

.selector-chooseall,
.selector-clearall {
  @apply block border-t border-base-200 cursor-pointer py-2 text-center text-sm text-default dark:border-base-700;
}

.selector-clearall {
  @apply text-red-600 dark:text-red-500;
}

.selector-chooser {
  @apply flex flex-col my-4 text-[0px] w-14;
}

.selector-chooser li {
  @apply py-1 text-center;
}

.selector-add:after,
.selector-remove:after {
  @apply inline-block material-symbols-outlined text-base-400 w-5;
}

.selector-add:after {
  content: "arrow_forward";
}

.selector-remove:after {
  content: "arrow_back";
}

.related-widget-wrapper {
  @apply flex-nowrap!;
}

.related-widget-wrapper-link {
  @apply order-last;
}

/*******************************************************
 Inlines
 *******************************************************/
.empty-form {
  @apply hidden;
}

.tabular-table tbody.has_original,
.tabular-table .template tr {
  @apply border-t border-base-200 dark:border-base-800;
}

.tabular-table tbody.has_original:first-of-type {
  @apply border-t-0;
}

.add-row {
  @apply align-middle bg-white px-3 py-5 font-normal text-right dark:bg-base-900;
}

[data-inline-type="stacked"] .add-row {
  @apply overflow-hidden;
}

.add-row td {
  @apply px-3 py-4;
}

.add-row a {
  @apply bg-white border border-base-200 block font-medium px-3 py-2 rounded-default text-center hover:text-base-700 lg:float-right dark:bg-base-900 dark:border-base-700 dark:hover:text-base-200;
}

.inline-deletelink {
  @apply block leading-none text-red-600 dark:text-red-500;
}

td .inline-deletelink {
  @apply block lg:mt-2.5;
}

/*******************************************************
 Autocomplete
 *******************************************************/
.select2.select2-container {
  @apply bg-white border border-base-200 max-w-2xl min-h-[38px]! relative rounded-default shadow-xs w-full! dark:bg-base-900 dark:border-base-700;
}

.select2-selection {
  @apply outline-none;
}

.select2.select2-container--open {
  @apply border-b-0 border-primary-600 relative outline-2 -outline-offset-2 outline-primary-600;
}

.select2.select2-container.select2-container--focus {
  @apply outline-2 outline-primary-600 -outline-offset-2;
}

.errors .select2.select2-container {
  @apply border-red-600;
}

.select2-container.select2-container--admin-autocomplete .select2-selection--single {
  @apply h-auto;
}

.select2-container.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
  @apply font-medium h-9 px-3 py-2 text-font-default-light text-sm dark:text-font-default-dark;
}

.select2-container.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__clear,
.select2-container.select2-container--admin-autocomplete .select2-selection--single .select2-selection__clear {
  @apply flex items-center h-9 -mt-2 text-[0px] after:text-base-400 hover:after:text-base-700 dark:hover:after:text-base-200 dark:after:text-base-500;
}

.select2-container.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__clear:after,
.select2-container.select2-container--admin-autocomplete .select2-selection--single .select2-selection__clear:after {
  @apply material-symbols-outlined transition-all content-['close\_small'] text-[18px] ;
}

.select2-container.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow {
  @apply flex h-9 items-center mr-2 -mt-px;
  @apply after:left-0 after:leading-none after:m-0 after:material-symbols-outlined after:text-base-400 after:text-lg dark:after:text-base-500;
}

.select2-container.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow:after {
  content: "expand_more";
}

.select2-container.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow b {
  @apply hidden;
}

.select2-container.select2-container--admin-autocomplete .select2-search--dropdown {
  @apply border-b border-base-200 py-1.5 px-1 relative dark:border-base-700 before:absolute before:content-['search'] before:material-symbols-outlined before:left-4 before:top-2.5 before:text-base-400 before:text-lg dark:before:text-base-500;
}

.select2-container.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field {
  @apply bg-base-100 border-0 border-base-200 border-solid grow font-medium mx-0 outline-hidden px-3 py-2 pl-9 rounded-default text-font-default-light text-sm w-full dark:bg-base-800 dark:border-base-800 dark:text-font-default-dark;
}

.select2-container .select2-results__options {
  @apply py-1;
}

.select2-container .select2-results__option--highlighted[aria-selected] {
    @apply !bg-base-100 dark:!bg-base-800;
}

.select2-container.select2-container--open .select2-dropdown {
  @apply bg-white border border-base-200 rounded-default shadow-xs dark:border-base-700 dark:bg-base-900;
}

.select2-container.select2-container--open .select2-dropdown--below {
  @apply mt-1;
}

.select2-container.select2-container--open .select2-dropdown--above {
  @apply mb-1;
}

.select2-container.select2-container--admin-autocomplete .select2-results__option {
  @apply block mb-0.5 mx-1 px-2 py-2 rounded-default text-font-default-light transition-all hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-800 dark:hover:text-base-200 dark:text-font-default-dark last:mb-0;
}
.select2-container.select2-container--admin-autocomplete .select2-results__option[aria-selected="true"] {
  @apply text-primary-600 dark:text-primary-500 flex items-center text-primary-600 dark:text-primary-500 after:content-['check'] after:material-symbols-outlined after:ml-auto;
}

.select2-container.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__clear {
  @apply m-0 mr-3 top-0;
}

.select2-container.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__rendered {
  @apply pl-1 pr-6 py-0 pt-1;
}

.select2-container.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
  @apply pr-8;
}

.select2-container--admin-autocomplete .select2-selection--multiple li.select2-selection__choice {
  @apply bg-base-100 block font-medium h-7 leading-7 m-0 mr-1 mb-1 px-2 shadow-inner text-sm text-base-600 hover:text-base-700 truncate dark:bg-base-800 dark:text-base-300 dark:hover:text-base-200;
}

.select2-container--admin-autocomplete .select2-selection--multiple li.select2-selection__choice .select2-selection__choice__remove {
  @apply align-top text-[0px] hover:text-base-600 dark:hover:text-base-200;
}

.select2-container--admin-autocomplete .select2-selection--multiple li.select2-selection__choice .select2-selection__choice__remove:after {
  @apply content-['close\_small'] h-7 leading-7! material-symbols-outlined;

  font-size: 14px;
}

.select2-container--admin-autocomplete .select2-selection--multiple li.select2-search--inline .select2-search__field {
  @apply m-0 h-7 ml-2 text-base-500 text-sm;
}

/*******************************************************
 Fieldset collapsible
 *******************************************************/
fieldset.collapsed > div {
  display: none;
}

fieldset.collapse {
  @apply visible;
}

fieldset.collapsed h2,
fieldset.collapsed {
  @apply block;
}

fieldset.collapsed .collapse-toggle {
  @apply inline;
}

fieldset details > summary {
  @apply list-none
}

fieldset details > summary:after {
  @apply material-symbols-outlined absolute cursor-pointer right-3 top-3.5;
  content: "expand_more";
}

fieldset details[open] > summary:after {
  @apply rotate-180;
}

/*******************************************************
 Calendar
 *******************************************************/
.calendarbox .calendar {
  @apply min-h-[320px];
}

.calendarbox,
.clockbox {
  @apply bg-white border border-base-200 rounded-default shadow-xs w-80 z-50 dark:bg-base-800 dark:border-base-700 fixed! left-1/2! top-1/2! -translate-x-1/2 -translate-y-1/2;
}

.calendar caption {
  @apply font-semibold mb-3 py-3 text-important;
}

.calendar table {
  @apply mb-3 w-full;
}

.calendar table th {
  @apply font-semibold text-center text-important text-xs;
}

.calendar table td {
  @apply h-10 p-1 text-center w-10;
}

.calendar table td a {
  @apply block flex h-8 items-center justify-center rounded-full w-8 dark:text-base-300;
}

.calendar table td a:hover {
  @apply bg-base-100 text-base-700;
}

.calendar table td.today a {
  @apply bg-primary-600 font-medium  text-white;
}

.calendar-shortcuts {
  @apply flex flex-row justify-center mb-3 px-1 rounded-b text-[0px];
}

.calendar-shortcuts a {
  @apply border border-base-200 font-medium leading-none mx-1 px-2 py-2 rounded-default shadow-xs text-center text-base-500 text-xs w-1/3 dark:border-base-700 dark:text-base-300 ;
}

.calendar-cancel {
  @apply block border-t border-base-200 py-2 text-center text-xs text-red-600 dark:border-base-700 dark:text-red-500;
}

.calendarnav-previous {
  @apply absolute block ml-2 mt-2 left-0 text-[0px] top-0;
}

.calendarnav-next,
.calendarnav-previous {
  @apply after:border after:border-base-200 after:flex after:h-7 after:items-center after:justify-center after:material-symbols-outlined after:rounded-full after:transition-all after:w-7 dark:after:bg-base-800 dark:after:border-base-700;
}

.calendarnav-previous:after {
  content: "navigate_before";
  display: flex;
}

.calendarnav-next:after {
  content: "navigate_next";
  display: flex;
}

.calendarnav-next {
  @apply absolute block mr-2 mt-2 right-0 text-[0px] top-0;
}

/*******************************************************
 Timepicker
 *******************************************************/
.clockbox {
  @apply bg-white border border-base-200 rounded-default shadow-xs text-sm dark:bg-base-800 dark:border-base-700 z-50;
}

.clockbox h2 {
  @apply font-medium px-3 py-2 text-base-700 dark:text-base-200;
}
.clockbox .timelist {
  @apply pb-2 px-3 text-base-500 dark:text-base-300;
}

.clockbox .timelist li {
  @apply block pb-1 transition-all;
}
.clockbox .timelist li:hover {
  @apply text-primary-500;
}

/*******************************************************
 Htmx
 *******************************************************/
.htmx-indicator.htmx-swapping:before {
  @apply absolute bg-white bottom-0 left-0 opacity-80 transition-all right-0 top-0;
  content: "";
}

.htmx-indicator.htmx-swapping:after {
  @apply absolute animate-spin h-4 inset-1/2 material-symbols-outlined md-16 text-base-400 w-4;
  content: "sync";
}

/*******************************************************
 Filters
 *******************************************************/
#changelist-filter .admin-numeric-filter-slider .noUi-handle {
  @apply bg-white border border-base-200 cursor-pointer h-4 -right-4 rounded-full shadow-xs w-4 dark:bg-base-200 dark:border-base-200;
}

#changelist-filter .admin-numeric-filter-slider .noUi-handle-upper {
  @apply right-0;
}

#changelist-filter .admin-numeric-filter-slider .noUi-handle:after {
  content: none;
}

#changelist-filter .admin-numeric-filter-slider .noUi-handle:before {
  content: none;
}

#changelist-filter .admin-numeric-filter-slider.noUi-target {
  @apply bg-base-200 border-0 h-1 shadow-none dark:bg-base-600;
}

#changelist-filter .admin-numeric-filter-slider .noUi-connect {
  @apply bg-primary-600 border-0 h-1;
}

/*******************************************************
 Trix
 *******************************************************/
trix-toolbar[id^="trix-toolbar-"] {
  @apply sticky top-0 dark:bg-base-900;
}

.trix-active {
  @apply text-primary-600;
}

/*******************************************************
 django-modeltranslation
 *******************************************************/
.ui-tabs {
  @apply flex flex-col;
}

.ui-tabs.ui-widget .ui-tabs-nav {
  @apply bg-base-100 border-0 flex gap-2 m-0 ml-3 mb-0 mt-3 mr-auto p-1 rounded-default text-sm dark:bg-white/[.04] after:hidden;
}

.ui-tabs.ui-widget .ui-tabs-nav li {
  @apply border-0 top-0;
}

.ui-tabs.ui-widget .ui-tabs-nav li a {
  @apply bg-transparent border-0 flex flex-row font-medium items-center m-0 px-2.5 py-1 rounded-default text-base-400 text-sm hover:bg-base-700/[.04] hover:text-base-700 dark:hover:bg-white/[.04] dark:hover:text-white;
}

.ui-tabs.ui-widget .ui-tabs-nav li.ui-tabs-active a {
  @apply flex flex-row font-medium items-center px-2.5 py-1 rounded-default  bg-white shadow-xs text-base-700 hover:bg-white dark:bg-base-900 dark:hover:bg-base-900 dark:text-white;
}

/*******************************************************
 Simplebar
 *******************************************************/
.simplebar-track .simplebar-scrollbar::before {
  @apply bg-base-900/80  dark:bg-base-400/80;
}

.simplebar-horizontal-scrollbar-top .simplebar-track.simplebar-horizontal {
  @apply top-9
}

/*******************************************************
 DjangoQL
 *******************************************************/
textarea#searchbar {
  @apply font-medium placeholder-base-400 leading-[35px] max-h-[35px] min-h-[35px] whitespace-nowrap !w-full focus:outline-none;
}

div.djangoql-completion {
  @apply border border-base-200 rounded-default shadow-xs bg-white dark:border-base-700 dark:bg-base-800 -ml-[39px] mt-[6px] w-[384px] z-40;
}

div.djangoql-completion ul {
  @apply py-1;
}

div.djangoql-completion li {
  @apply flex items-center leading-none mx-1 px-3 h-[30px] rounded-default text-sm hover:bg-base-100 hover:text-important hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200;
}

div.djangoql-completion li.active {
  @apply bg-base-100 text-important dark:bg-base-700;
}

div.djangoql-completion li i {
  @apply ml-auto text-sm text-default;
}

div.djangoql-completion .syntax-help {
  @apply hidden;
}

.djangoql-toggle {
  @apply appearance-none bg-white block border border-base-300 cursor-pointer h-4 min-w-4 relative rounded-[4px] shadow-xs w-4 hover:border-base-400 dark:bg-base-700 dark:border-base-500 dark:checked:after:text-white focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-primary-500 after:absolute after:content-['check\_small'] after:flex! after:h-4 after:items-center after:justify-center after:leading-none after:material-symbols-outlined after:-ml-px after:-mt-px after:text-white after:transition-all after:w-4 dark:after:text-base-700 checked:bg-primary-600 dark:checked:bg-primary-600 checked:border-primary-600 dark:checked:border-primary-600 checked:transition-all checked:hover:border-primary-600;
  @apply relative -ml-4.5;
}
